<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>


	<!-- css files -->
	<link rel="stylesheet" href="css/style_sign.css" type="text/css" media="all" />
	<link href="css/font-awesome.min.css" rel="stylesheet">
	

	
</head>

<body>
	<div class="main-bg" id="sign">
		<!-- title -->
		<h1></h1>
		<!-- //title -->
		<div class="sub-main-w3">
			<!-- vertical tabs -->
			<div class="vertical-tab" style="margin-left:125px">
				<div id="section1" class="section-w3ls">
					<input type="radio" name="sections" id="option1" checked>
					<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend">登录</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input v-model="email"  placeholder="邮箱" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="u_passwd" placeholder="密码"  required />
							</div>
							<input type="button" value="登录" @click="sign" class="btn submit">
							
						</form>
					</article>
				</div>
				<div id="section2" class="section-w3ls">
					<input type="radio" name="sections" id="option2">
					<label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend">注册</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input v-model="email"  placeholder="邮箱" required />
								<button @click="getCode" style="margin-left:-30px;width:90px">获取验证码</button>
							</div>
							<div class="input">
								<span class="fa fa-check" aria-hidden="true"></span>
								<input v-model="checkText" placeholder="验证码" required />
							</div>
							<div class="input">
								<span class="fa fa-user-o" aria-hidden="true"></span>
								<input v-model="nickname" placeholder="昵称"  required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_old" placeholder="密码" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_new" placeholder="确认密码 " required />
							</div>
					
							<input type="button" value="注册" @click="signUp" class="btn submit">
						</form>
					</article>
				</div>
				<div id="section3" class="section-w3ls">
					<input type="radio" name="sections" id="option3">
					<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend last">重置密码</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input v-model="email" placeholder="邮箱" required />
								<button @click="getCode" style="margin-left:-30px;width:90px">获取验证码</button>
							</div>
							<div class="input">
								<span class="fa fa-check" aria-hidden="true"></span>
								<input v-model="checkText" placeholder="验证码" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_old" placeholder="密码" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input v-model="passwd_new" placeholder="确认密码 " required />
							</div>
							
							<input type="button" value="重置" @click="set" class="btn submit last-btn">
						</form>
					</article>
				</div>
			</div>
			
			<div class="clear"></div>
		</div>
		
	</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vue=new Vue({
	el:'#sign',
	data:{
		email:"",
		u_passwd:"",
		nickname:"",
		passwd_old:"",
		passwd_new:"",
		checkText:"",
		code:""
	},
	methods:{
		
		sign:function(){
			window.location.href='index.html?email='+this.email+'&nickname=deuhui';
			$.ajax({
				url:"http://27x31799n7.zicp.vip/login?email="+this.email,
				type:"POST",
				data:'u_passwd='+this.u_passwd,
				dataType:"json",
				success:function(data){
					if(data.code=="200"){
						alert("登录成功");
						window.location.href='index.html?email='+this.email+'nickname='+data.nickname;
					}else if(data.code=="400"){
						alert("密码错误，请重新登录或找回密码");
						window.location.href='sign.html';
					}
				}
			})
		},
		signUp:function(){
			if(this.passwd_old!=this.passwd_new){
				alert("两次密码不一致");
			}else{
				if(this.code==this.checkText){
					$.ajax({
						url:"http://27x31799n7.zicp.vip/register?email="+this.email,
						type:"POST",
						data:{u_passwd:this.u_passwd},
						dataType:"json",
						success:function(data){
							if(data.code=="200"){
								alert("登录成功");
								window.location.href='index.html?email='+this.email+'nickname='+data.nickname;
							}else if(data.code=="400"){
								alert("用户已存在，请直接登录");
								window.location.href='sign.html';
							}
						}
					})
				}else{
					alert("验证码错误");
					this.checkText="";
				}
				
			}
		},
		getCode:function(){
			console.log("验证码");
			$.ajax({
				url:"http://27x31799n7.zicp.vip/getVerification?email="+this.email,
				type:"GET",
				data:{
					
				},
				dataType:"json",
				success:function(data){
					if(data.code=="200")
						this.code=data.checkText;
					else if(data.code=="400")
						getCode();
				}
			})
		},
		set:function(){
			if(this.code==this.checkText){
				if(this.passwd_old==this.passwd_new){
					$.ajax({
						url:"http://27x31799n7.zicp.vip/changePassword?email="+this.email,
						type:"POST",
						data:{
							u_passwd:this.passwd_new 	
						},
						success:function(data){
							window.location.href='index.html?email='+this.email+'&nickname='+data.nickname;
						}
						
					})
				}else{
					alert("两次密码不一致，请重新输入");
					this.passwd_old="";
					this.passwd_new="";
				}
			}else{
				alert("验证码错误");
				this.checkText=="";
			}
		}
		
	}
})
	
</script>
</body>

</html>